<script lang="ts" setup>
import { queryDictData } from "@/api/common";
import {
  getFabAlarm,
  getFabDayMaintainTotalNum_2,
  getFabDayPmTotalNum_1,
  getFabStatusTotalNum_1,
  queryEquipmentStatusByClass,
  queryInspectTaskCount,
  queryJobsNumForLeader,
  queryLastScadaValue,
  queryPointCheckCount,
  queryQtyAmtEcarbonScoal,
  queryResultCount,
  queryScadaIndicator,
  queryWorkOrderStatusCount
} from "@/api/leadScreen";
import dayjs from "dayjs";
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import Guage from "../Guage/index.vue";
import LinesDialog from "../LinesDialog/index.vue";
import Pie from "../Pie/index.vue";
import Progress from "../Progress/index.vue";
import Card from "../ScreenCard/index.vue";
import { getCuageConfig, SCOAL_YEARS_CONFIG, SCOAL_YEARS_OVERVIEW } from "./const";
const guageLoading = ref(false);
const nFormatter = (num, digits = 2) => {
  if (!num && num !== 0) {
    return "-";
  }
  const si = [
    { value: 1, symbol: "" },
    { value: 1e3, symbol: "K" },
    { value: 1e6, symbol: "M" },
    { value: 1e9, symbol: "G" },
    { value: 1e12, symbol: "T" },
    { value: 1e15, symbol: "P" },
    { value: 1e18, symbol: "E" }
  ];
  const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
  let i;
  for (i = si.length - 1; i > 0; i--) {
    if (num >= si[i].value) {
      break;
    }
  }
  return (num / si[i].value).toFixed(digits).replace(rx, "$1") + si[i].symbol;
};
const getNum = num => {
  if (!num && num !== 0) {
    return "-";
  }
  return num;
};
const getTotalNum = arr => {
  if (arr.length === 0) {
    return 0;
  }
  const total = arr.reduce(function (prev, curr) {
    return Number(prev) + Number(curr);
  });
  return total;
};
let guageTimeRef = null;
let otherTimeRef = null;
let emtTimeRef = null;
const guageConfig = ref(); // 页面配置
const getPionts = data => {
  const PointObj: any = {};
  function tranformData(targetData, obj) {
    if (!targetData) {
      return;
    }
    targetData.forEach(item => {
      obj[item.name] = { point: item.value, data: {} };
      if (item.children) {
        tranformData(item.children, obj[item.name].data);
      }
    });
  }
  tranformData(data, PointObj);
  return PointObj;
};
onBeforeUnmount(() => {
  clearTimeout(guageTimeRef);
  clearTimeout(otherTimeRef);
  clearTimeout(emtTimeRef);
  document.removeEventListener("visibilitychange", visibilitychange, true);
});
const visibilitychange = () => {
  const isHidden = document.hidden;
  if (isHidden) {
    clearTimeout(guageTimeRef);
    clearTimeout(otherTimeRef);
    clearTimeout(emtTimeRef);
  } else {
    init();
  }
};
const points = ref();
onMounted(async () => {
  document.addEventListener("visibilitychange", visibilitychange, true);
  init();
});
const init = async () => {
  // !!! 获取领导驾驶舱全部点位，详见数据字典/system/dataDictItem?typeCode=LEADER_SCREEN_POINTS
  const data = await queryDictData({ typeCode: "LEADER_SCREEN_POINTS" });
  const pointObj = getPionts(data);
  points.value = pointObj.screenPoint?.data || {};
  guageConfig.value = getCuageConfig(points.value?.guageParams?.data || {});
  initGuage();
  initEqpData();
  initCWTaskList();
  initJtData();
  initQtyAmtEcarbonScoal("years");
  guageTimeRef = setInterval(() => {
    initGuage();
  }, 5000);
  otherTimeRef = setInterval(() => {
    initEqpData();
    initCWTaskList();
    initJtData();
  }, 10000);
  const timeRange = 5 * 60 * 1000;
  emtTimeRef = setInterval(() => {
    initQtyAmtEcarbonScoal("years");
    // initQtyAmtEcarbonScoal("months");
  }, timeRange);
};
// 厂务设备概览-start
const eqpRun: any = ref({});
const initEqpData = async () => {
  const res = await queryEquipmentStatusByClass({ facCode: "FAC_83abf9" });
  if (res) {
    const obj = {};
    res.forEach(element => {
      const key = element.eqpRunStatus?.toLowerCase();
      if (key) {
        obj[key] = element.statusNum;
      }
    });
    const total = getTotalNum(Object.values(obj));
    eqpRun.value = { ...obj, total };
  }
};
// 厂务设备概览-end

// 厂务侧任务-start
const cwTaskLableList = ["维修任务", "保养任务", "巡检任务", "点检任务"];
const cwTaskList = ref<any[]>([]);
const initCWTaskList = () => {
  const OYear = new Date().getFullYear();
  const startTime = dayjs(`${OYear}-01-01`).format("YYYY-MM-DD HH:mm:ss");
  const endTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
  Promise.allSettled([
    queryWorkOrderStatusCount({
      startTime,
      endTime
    }),
    queryJobsNumForLeader({
      startTime,
      endTime
    }).then((res: any) => {
      if (res) {
        // 后端接口未传值，前端自行计算保养任务总数
        const totalCount = res ? getTotalNum(Object.values(res)) : null;
        return { totalCount, ...res };
      }
    }),
    queryInspectTaskCount({
      startTime,
      endTime
    }),
    queryPointCheckCount({
      startTime,
      endTime
    })
  ]).then((res: any[]) => {
    cwTaskList.value = res.map((item, index) => ({ name: cwTaskLableList[index], value: item.value || {} }));
  });
};
// 厂务侧任务-end

// 机台侧任务-start
const jtData: any = ref({});
const initJtData = () => {
  Promise.allSettled([
    getFabStatusTotalNum_1("").then(res => {
      if (res) {
        const obj = {};
        res.forEach(element => {
          const key = element.eqpStatus?.toLowerCase();
          if (key) {
            obj[key] = element.num;
          }
        });
        const total = getTotalNum(Object.values(obj));
        return { ...obj, total, name: "status" };
      }
    }),
    getFabDayPmTotalNum_1("").then(res => {
      if (res) {
        const obj = {};
        res.forEach(element => {
          const key = element.pmStatus;
          if (key) {
            obj[key] = element.num;
          }
        });
        const total = getTotalNum(Object.values(obj));
        return { ...obj, total, name: "pm" };
      }
    }),
    getFabDayMaintainTotalNum_2("").then(res => {
      if (res) {
        const obj = {};
        res.forEach(element => {
          const key = element.deviceMaintain;
          if (key) {
            obj[key] = element.num;
          }
        });
        const total = getTotalNum(Object.values(obj));
        return { ...obj, total, name: "maintain" };
      }
    }),
    getFabAlarm("").then(res => {
      if (res) {
        const obj: any = {};
        res.forEach(element => {
          const key = element.alarmStatus;
          if (key) {
            obj[key] = element.num;
          }
        });
        const total = getTotalNum(Object.values(obj));
        const rate = obj.completed ? (obj.completed / total).toFixed(2) : 0;
        return { ...obj, rate, total, name: "alarm" };
      }
    })
  ]).then(res => {
    const obj = {};
    res.forEach((item: any) => {
      if (item.value && item.value.name) {
        obj[item.value.name] = item.value;
      }
    });
    jtData.value = obj;
  });
};
// 机台侧任务-end

// 仪表盘-start
const guageData: any = ref({});
const temperature: any = ref({});
const initGuage = () => {
  initGuageData();
  initTemperature();
};
// 初始化温度
const initTemperature = async () => {
  let time = dayjs().format("YYYY-MM-DD HH:mm:ss");

  // const jobIdList = Object.values(points.value?.jobIdList?.data || {}).map((item: any) => item.point.replace("jobId-", ""));
  const jobIdList = [].concat(
    ...Object.values(points.value?.jobIdList?.data || {}).map((item: any) => {
      return Object.keys(item.data);
    })
  );
  // const pointList = Object.values(points.value?.pointList?.data || {}).map((item: any) => item.point.replace("point-", ""));
  const params = {
    jobIdList,
    classCode: "ELECTRICTITY",
    startTime: time,
    endTime: time
  };
  const res = await queryResultCount(params);
  if (res) {
    const obj = {};
    res.resultCountDTOList.forEach(item => {
      obj[item.jobId] = true;
    });
    temperature.value = obj;
  }
};
const initGuageData = async () => {
  if (guageLoading.value) {
    return;
  }
  guageLoading.value = true;
  try {
    const obj = {};
    const data = points.value?.guageParams?.data || {};
    const guageParams = Object.values(data).map(item => item.point);
    const res = await queryLastScadaValue(guageParams);
    // last_value 最新值
    // point 点位名称
    res.rows.forEach(item => {
      obj[item.point] = item.last_value;
    });
    guageData.value = { ...guageData.value, ...obj };
    guageLoading.value = false;
  } catch (error) {
    guageLoading.value = false;
  }
};
const getMachine = arr => {
  const new_arr = arr.map(item => ({ value: guageData.value[item.point], ...item }));
  return new_arr;
};
// 仪表盘-end

// 折线图-start
const visible = ref(false);
const dialogData = ref([]);
watch(visible, () => {
  // 折线弹窗关闭，清空数据
  if (!visible.value) {
    dialogData.value = [];
  }
});
const dialogTtile = ref("");
const xAxisData = ref([]);
const lineLoading = ref(false);
const getTimeRange = range => {
  let now = new Date();
  let startTime = "";
  let endTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
  if (range === "6小时") {
    // 计算6小时前的时间
    let sixHoursAgo = new Date(now.getTime() - 6 * 60 * 60 * 1000); // 6小时 = 6 * 60 * 60 * 1000 毫秒
    startTime = dayjs(sixHoursAgo).format("YYYY-MM-DD HH:mm:ss");
  } else if (range === "24小时") {
    // 计算24小时前的时间
    let sixHoursAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000); // 24小时 = 24 * 60 * 60 * 1000 毫秒
    startTime = dayjs(sixHoursAgo).format("YYYY-MM-DD HH:mm:ss");
  } else {
    // 计算1天前的时间
    let sevenDaysAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000); // 1天 = 24 * 60 * 60 * 1000 毫秒
    startTime = dayjs(sevenDaysAgo).format("YYYY-MM-DD HH:mm:ss");
  }
  return { startTime, endTime };
};
// 点击仪表盘等唤起折线框弹窗
const handleClick = async config => {
  const { title, data, timeRange, bucketUnit, point, ...others } = config;
  const { startTime, endTime } = getTimeRange(timeRange);
  const params = {
    indicators: ["LAST"],
    pageNum: 1,
    pageSize: 9999,
    contentType: "LIST",
    startTime,
    endTime,
    bucketUnit,
    point,
    ...others
  };
  dialogTtile.value = title;
  visible.value = true;
  lineLoading.value = true;
  try {
    const res: any = await queryScadaIndicator(params);
    const rows = res?.rows || [];
    // const rowData = rows.map(item => item.last_value || 0);
    xAxisData.value = Array.from(new Set(rows.map(item => item[bucketUnit])));
    const lineData: any = [];

    point.forEach((pointKey, index) => {
      const arr = rows
        .filter(rowItem => rowItem.point === pointKey)
        .map(item => {
          return item.last_value ? Number(item.last_value).toFixed(2) : item.last_value;
        });

      lineData.push({
        ...data[index],
        data: arr
      });
    });
    dialogData.value = lineData;
  } catch (error) {}
  lineLoading.value = false;
};
// 折线图-end

// 厂务设备概览/本年能耗 - start

const getItemWidth = rate => {
  const width = rate ? 200 * rate + "px" : 0;
  return width;
};
const getItemVlaue = (rate, subfix = "") => {
  const value = rate ? (rate * 100).toFixed(2) : 0;
  return value + subfix;
};
const qtyAmtEcarbonScoalYears: any = ref({});
// const qtyAmtEcarbonScoalYears: any = ref({});
const scoalData = ref<any>([]);
const scoalAmt = ref(0); // 总能耗
const setScoalData = () => {
  const arr = SCOAL_YEARS_CONFIG.map(item => {
    const [allItem, ...others] = item;
    const scoalYear = qtyAmtEcarbonScoalYears.value;
    const values = others.map(obj => (scoalYear[obj.key] ? Number(scoalYear[obj.key]) : 0));
    const total = allItem.key ? scoalYear[allItem.key] : getTotalNum(values);
    scoalAmt.value += total;

    const objArr = others.map(obj => {
      const value = scoalYear[obj.key] ? Number(scoalYear[obj.key]) : 0;
      const rate = value / total;
      return { ...obj, value, rate: rate > 1 ? 1 : rate };
    });
    return [
      {
        name: "总费用",
        value: total,
        rate: total > 0 ? 1 : 0,
        hiddenLabel: true
      },
      ...objArr
    ];
  });
  scoalData.value = arr;
};
const initQtyAmtEcarbonScoal = async (bucketUnit: string) => {
  const endDate = dayjs().format("YYYY-MM-DD");
  const params = {
    endDate,
    bucketWidth: 0,
    bucketUnit
  };
  const res = await queryQtyAmtEcarbonScoal(params);
  // if (bucketUnit === "months") {
  // } else {
  // qtyAmtEcarbonScoalYears.value = res;
  qtyAmtEcarbonScoalYears.value = res;
  setScoalData();
  // }
};
// 厂务设备概览/本年能耗 - end
</script>
<template>
  <div class="phase-body">
    <section class="screen-body-left">
      <Card title="厂务设备概览">
        <div class="pt-[28px] px-[20px]">
          <div class="flex-center">
            <div class="eqp-all">
              <div class="eqp-all-icon" />
              <div class="eqp-all-content">
                <div class="eqp-all-content-text">设备总数</div>
                <div class="eqp-all-content-num">{{ getNum(eqpRun.total) }}</div>
              </div>
            </div>
            <div class="ml-[24px] status-list">
              <div class="stop">
                <span class="stauts-list-item-text">待机</span>
                <span class="stauts-list-item-num">{{ getNum(eqpRun["5"]) }}</span>
              </div>
              <div class="run">
                <span class="stauts-list-item-text">运行</span>
                <span class="stauts-list-item-num">{{ getNum(eqpRun["1"]) }}</span>
              </div>
            </div>
          </div>
          <ul class="flex-center error-list">
            <li class="error-list-item error1">
              <div class="error-list-item-text">带病</div>
              <div class="error-list-item-num">{{ getNum(eqpRun["3"]) }}</div>
            </li>
            <li class="error-list-item error2">
              <div class="error-list-item-text">故障</div>
              <div class="error-list-item-num">{{ getNum(eqpRun["2"]) }}</div>
            </li>
            <li class="error-list-item error3">
              <div class="error-list-item-text">离线</div>
              <div class="error-list-item-num">{{ getNum(eqpRun["4"]) }}</div>
            </li>
            <li class="error-list-item error4">
              <div class="error-list-item-text">侦测器隔离</div>
              <div class="error-list-item-num">{{ getNum(eqpRun["6"]) }}</div>
            </li>
          </ul>
        </div>
      </Card>
      <Card title="厂务侧任务">
        <ul class="month-task-list px-[20px]" style="height: 312px">
          <li v-for="(item, index) in cwTaskList" :key="index" class="cw-task-list-item">
            <div class="task-overview">
              <div :class="`cw-task-list-item-icon icon${index + 1}`" />
              <div>
                <div class="cw-task-list-item-num">{{ nFormatter(item.value.totalCount, 2) }}</div>
                <div class="cw-task-list-item-text">{{ item.name }}</div>
              </div>
            </div>
            <ul class="detail-list">
              <li class="detail-list-item">
                <div class="detail-list-item-num">{{ nFormatter(item.value.completedCount || item.value.completedNum, 2) }}</div>
                <div class="detail-list-item-text">已完成</div>
              </li>
              <li class="detail-list-item">
                <div class="detail-list-item-num">{{ nFormatter(item.value.doingCount || item.value.ongoingNum) }}</div>
                <div class="detail-list-item-text">执行中</div>
              </li>
              <li class="detail-list-item">
                <div class="detail-list-item-num">{{ nFormatter(item.value.undoCount || item.value.unStartedNum) }}</div>
                <div class="detail-list-item-text">待开始</div>
              </li>
            </ul>
          </li>
        </ul>
      </Card>
      <Card title="机台概览">
        <div class="flex-center jt-overview px-[20px] pt-[15px] pb-[18px]">
          <div class="all">
            <div class="all-num">{{ jtData.status?.total }}</div>
            <div class="all-text">All</div>
          </div>
          <ul class="jt-list">
            <li class="jt-list-item run mb-[20px]">
              <div class="jt-list-item-icon" />
              <div>
                <div class="jt-list-item-text">run</div>
                <div class="jt-list-item-num">{{ getNum(jtData.status?.run) }}</div>
              </div>
            </li>
            <li class="jt-list-item down mb-[20px]">
              <div class="jt-list-item-icon" />
              <div>
                <div class="jt-list-item-text">down</div>
                <div class="jt-list-item-num">{{ getNum(jtData.status?.down) }}</div>
              </div>
            </li>
            <li class="jt-list-item idle">
              <div class="jt-list-item-icon" />
              <div>
                <div class="jt-list-item-text">idle</div>
                <div class="jt-list-item-num">{{ getNum(jtData.status?.idle) }}</div>
              </div>
            </li>
            <li class="jt-list-item pm">
              <div class="jt-list-item-icon" />
              <div>
                <div class="jt-list-item-text">pm</div>
                <div class="jt-list-item-num">{{ getNum(jtData.status?.pm) }}</div>
              </div>
            </li>
          </ul>
        </div>
      </Card>
      <Card title="机台侧任务">
        <ul class="month-task-list px-[20px]">
          <li class="cw-task-list-item">
            <div class="task-overview">
              <div class="cw-task-list-item-icon icon1" />
              <div>
                <div class="cw-task-list-item-num">{{ nFormatter(jtData.maintain?.total) }}</div>
                <div class="cw-task-list-item-text">维修任务</div>
              </div>
            </div>
            <ul class="detail-list">
              <li class="detail-list-item">
                <div class="detail-list-item-num">{{ nFormatter(jtData.maintain?.DONE) }}</div>
                <div class="detail-list-item-text">已完成</div>
              </li>
              <li class="detail-list-item">
                <div class="detail-list-item-num">{{ nFormatter(jtData.maintain?.RUN) }}</div>
                <div class="detail-list-item-text">执行中</div>
              </li>
              <li class="detail-list-item">
                <div class="detail-list-item-num">{{ nFormatter(jtData.maintain?.CREATED) }}</div>
                <div class="detail-list-item-text">待开始</div>
              </li>
            </ul>
          </li>
          <li class="cw-task-list-item">
            <div class="task-overview">
              <div class="cw-task-list-item-icon icon2" />
              <div>
                <div class="cw-task-list-item-num">{{ nFormatter(jtData.pm?.total) }}</div>
                <div class="cw-task-list-item-text">保养任务</div>
              </div>
            </div>
            <ul class="detail-list">
              <li class="detail-list-item">
                <div class="detail-list-item-num">{{ nFormatter(jtData.pm?.completed) }}</div>
                <div class="detail-list-item-text">已完成</div>
              </li>
              <li class="detail-list-item">
                <div class="detail-list-item-num">{{ nFormatter(jtData.pm?.created) }}</div>
                <div class="detail-list-item-text">执行中</div>
              </li>
              <li class="detail-list-item">
                <div class="detail-list-item-num">{{ nFormatter(jtData.pm?.ongoing) }}</div>
                <div class="detail-list-item-text">待开始</div>
              </li>
            </ul>
          </li>
        </ul>
      </Card>
      <Card title="机台异常事件">
        <div class="jt-month-error px-[20px] flex-center-between">
          <Pie :data="jtData.alarm?.rate || 0" title="完成率" />
          <div class="error-data">
            <div class="error-data-top flex-center-between">
              <span class="error-data-top-text">异常事件总数</span>
              <span class="error-data-top-num">{{ getNum(jtData.alarm?.total) }}</span>
            </div>
            <div class="error-data-item flex-center-between">
              <span class="error-data-item-text">已处理</span>
              <span class="error-data-item-num">{{ getNum(jtData.alarm?.completed) }}</span>
            </div>
            <div class="error-data-item flex-center-between">
              <span class="error-data-item-text">未处理</span>
              <span class="error-data-item-num">{{ getNum(jtData.alarm?.created) }}</span>
            </div>
          </div>
        </div>
      </Card>
    </section>
    <section class="screen-body-center">
      <template v-if="guageConfig">
        <Card size="big" title="机械科运行">
          <div class="grid pt-[20px]">
            <Guage
              v-for="(item, index) in guageConfig.MACHINE"
              :key="index"
              class="mb-[19px] clickAble"
              :data="getMachine(item.guageConfig)"
              @click="handleClick(item.linesConfig)"
            />
          </div>
        </Card>
        <Card size="big" title="电科运行">
          <div class="grid pt-[20px]">
            <div v-for="item in guageConfig.ELECTRICTITY" :key="item.dianliu.guageConfig.point" class="pb-[18px]">
              <Guage
                name="MV10"
                class="clickAble"
                :data="[
                  {
                    value: guageData[item.dianliu.guageConfig.point],
                    ...item.dianliu.guageConfig
                  }
                ]"
                @click="handleClick(item.dianliu.linesConfig)"
              />
              <ul class="label-double mb-[2px] mt-[2px] pl-[16px] pr-[16px]">
                <li class="label-double-item clickAble" @click="handleClick(item.zonggonglv.linesConfig)">
                  <div class="label-double-text">总功率</div>
                  <div class="label-double-num">{{ guageData[item.zonggonglv.linesConfig.point[0]]?.toFixed(2) }}kW</div>
                </li>
                <li class="label-double-item clickAble" @click="handleClick(item.dianya.linesConfig)">
                  <div class="label-double-text">电压</div>
                  <div class="label-double-num">{{ guageData[item.dianya.linesConfig.point[0]]?.toFixed(2) }}V</div>
                </li>
              </ul>
              <Progress
                :data="{
                  value: guageData[item.dianya.linesConfig.point[0]],
                  interval: [9300, 10700],
                  status: guageData[item.status],
                  jobIdList: points.jobIdList.data[item.temperatureStatus],
                  temperature: temperature
                }"
              />
            </div>
          </div>
        </Card>
        <Card size="big" title="水科运行">
          <div class="grid pt-[20px]">
            <Guage
              v-for="item in guageConfig.WATER"
              :key="item.guageConfig.point"
              class="mb-[22px] clickAble"
              :data="[
                {
                  value: guageData[item.guageConfig.point],
                  ...item.guageConfig
                }
              ]"
              @click="handleClick(item.linesConfig)"
            />
          </div>
        </Card>
        <Card size="big" title="气化科运行">
          <px-carousel height="320px" arrow="never" :interval="20000">
            <px-carousel-item>
              <div class="grid pt-[20px]">
                <Guage
                  v-for="item in guageConfig.GAS.slice(0, 8)"
                  :key="item.guageConfig.point"
                  class="mb-[20px] clickAble"
                  :data="[
                    {
                      value: guageData[item.guageConfig.point],
                      ...item.guageConfig
                    }
                  ]"
                  @click="handleClick(item.linesConfig)"
                />
              </div>
            </px-carousel-item>
            <px-carousel-item>
              <div class="grid pt-[20px]">
                <Guage
                  v-for="item in guageConfig.GAS.slice(8)"
                  :key="item.guageConfig.point"
                  class="mb-[20px] clickAble"
                  :data="[
                    {
                      value: guageData[item.guageConfig.point],
                      ...item.guageConfig
                    }
                  ]"
                  @click="handleClick(item.linesConfig)"
                />
              </div>
            </px-carousel-item>
          </px-carousel>
        </Card>
      </template>
    </section>
    <section class="screen-body-right">
      <Card title="能碳">
        <div class="eqp-overview px-[20px]">
          <div class="flex-center pf-overview">
            <div class="pf-overview-icon" />
            <div>
              <div class="eqp-overview-text">本年度碳排放</div>
              <div>
                <span class="eqp-overview-num">{{ qtyAmtEcarbonScoalYears.ecarbon?.toFixed(2) }}</span>
                <sub class="eqp-overview-sub">tCO₂e</sub>
              </div>
            </div>
            <div class="pf-overview-bg" />
          </div>
          <div class="flex-center zm-overview">
            <div class="zm-overview-icon" />
            <div>
              <div class="eqp-overview-text">本年度折标煤</div>
              <div>
                <span class="eqp-overview-num">{{ qtyAmtEcarbonScoalYears.scoal?.toFixed(2) }}</span>
                <sub class="eqp-overview-sub">tce</sub>
              </div>
            </div>
            <div class="zm-overview-bg" />
          </div>
        </div>
      </Card>
      <Card title="本年能耗">
        <div class="pb-[14px] px-[20px]">
          <div class="month-energry-consumption">
            <px-carousel height="178px" arrow="never" :interval="20000">
              <px-carousel-item>
                <ul class="month-energry-consumption-overview-list">
                  <li v-for="item in SCOAL_YEARS_OVERVIEW.slice(0, 6)" :key="item.value" class="month-energry-consumption-overview-item">
                    <div class="item-text">{{ item.label }}</div>
                    <div>
                      <span class="item-num">{{
                        item.callback ? item.callback(qtyAmtEcarbonScoalYears[item.value]) : qtyAmtEcarbonScoalYears[item.value]?.toFixed(2)
                      }}</span>
                      <sub class="item-sub">{{ item.unit }}</sub>
                    </div>
                  </li>
                </ul>
              </px-carousel-item>
              <px-carousel-item>
                <ul class="month-energry-consumption-overview-list">
                  <li v-for="item in SCOAL_YEARS_OVERVIEW.slice(6, 12)" :key="item.value" class="month-energry-consumption-overview-item">
                    <div class="item-text">{{ item.label }}</div>
                    <div>
                      <span class="item-num">{{
                        item.callback ? item.callback(qtyAmtEcarbonScoalYears[item.value]) : qtyAmtEcarbonScoalYears[item.value]?.toFixed(2)
                      }}</span>
                      <sub class="item-sub">{{ item.unit }}</sub>
                    </div>
                  </li>
                </ul>
              </px-carousel-item>
            </px-carousel>
          </div>
          <div class="year-expenses">
            <div class="year-expenses-title flex-center">
              <div class="year-expenses-title-icon" />
              <div class="year-expenses-title-text">本年度能耗总费用</div>
            </div>
            <div class="year-expenses-value">
              <span class="year-expenses-num">{{ scoalAmt?.toFixed(0) }}</span>
              <sub class="year-expenses-sub">元</sub>
            </div>
          </div>
          <div class="year-expenses-detail">
            <div v-for="(scoal, index) in scoalData" :key="index" class="detail-card">
              <div :class="['detail-card-icon', `icon${index + 1}`].join(' ')" />
              <ul class="detail-card-list">
                <li v-for="(item, ind) in scoal" :key="ind" class="detail-card-item">
                  <span class="item-name">{{ item.name }}</span>
                  <div class="item-progress">
                    <div :style="`width:${getItemWidth(item.rate)}`" class="item-progress-content">
                      <span v-if="!item.hiddenLabel">{{ getItemVlaue(item.rate, "%") }}</span>
                    </div>
                  </div>
                  <div>
                    <span class="item-num">{{ item.value?.toFixed(0) }}</span>
                    <span class="item-sub">元</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </Card>
    </section>
    <LinesDialog v-if="visible" v-model:visible="visible" :title="dialogTtile" :loading="lineLoading" :data="dialogData" :xAxisData="xAxisData" />
  </div>
</template>
<style lang="scss" scoped>
.phase-body {
  box-sizing: border-box;
  padding: 0 24px;
  display: flex;
  sub {
    bottom: 0;
    margin-left: 2px;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    justify-items: center;
  }
  .screen-body-left {
    flex-basis: 532px;
    flex-grow: 1;
  }
  .screen-body-center {
    flex-basis: 768px;
    flex-grow: 1;
    margin: 0 20px;
  }
  .screen-body-right {
    flex-basis: 532px;
    flex-grow: 1;
  }
  .px-20 {
    padding: 0 20px;
  }
  .mt10 {
    margin-top: 10px;
  }
  .flex-center {
    display: flex;
    align-items: center;
  }
  .clickAble {
    cursor: pointer;
  }
  .flex-center-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .eqp-all {
    width: 243px;
    height: 90px;
    background: url("/ifp-web-static/image/all/leadScreen/Group_130@2x.png") no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    position: relative;
    .eqp-all-icon {
      width: 64px;
      height: 74px;
      position: absolute;
      left: 18px;
      top: -18px;
      background: url("/ifp-web-static/image/all/leadScreen/Group_17@2x.png") no-repeat;
      background-position: center center;
      background-size: 100% 100%;
    }
    .eqp-all-content {
      text-align: left;
      padding-left: 103px;
      position: absolute;
      top: 8px;
      left: 0;
      &-text {
        font-size: 22px;
        font-weight: 400;
        color: #b1bdca;
        line-height: 24px;
      }
      &-num {
        font-size: 40px;
        font-family: "TCloudNumber-Regular", "TCloudNumber";
        font-weight: 400;
        color: #d0deee;
        line-height: 36px;
        margin-top: 5px;
      }
    }
  }
  .status-list {
    .stop,
    .run {
      width: 227px;
      height: 45px;
      padding-left: 54px;
      display: flex;
      align-items: center;
    }
    .stop {
      background: url("/ifp-web-static/image/all/leadScreen/Group_20@2x.png") no-repeat;
      background-position: center center;
      background-size: 100% 100%;
    }
    .run {
      background: url("/ifp-web-static/image/all/leadScreen/Group_19@2x.png") no-repeat;
      background-position: center center;
      background-size: 100% 100%;
    }
    .stauts-list-item-text {
      font-size: 20px;
      font-weight: 400;
      color: #b1bdca;
      margin-right: 29px;
    }
    .stauts-list-item-num {
      font-size: 28px;
      font-family: "TCloudNumber-Regular", "TCloudNumber";
      font-weight: 400;
      color: #d0deee;
    }
  }
  .error-list {
    margin-top: 19px;
    .error-list-item {
      width: 123px;
      text-align: center;
      &-text {
        text-align: center;
        color: rgba(177, 189, 202, 1);
        font-weight: 400;
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 3px;
      }
      &-num {
        height: 38px;
        font-size: 28px;
        font-family: "TCloudNumber-Regular", "TCloudNumber";
        font-weight: 400;
        line-height: 28px;
      }
      &.error1 {
        background: url("/ifp-web-static/image/all/leadScreen/Group_23@2x.png") no-repeat;
        background-position: bottom center;
        background-size: 100% auto;
        .error-list-item-num {
          color: #ffc97a;
        }
      }
      &.error2 {
        background: url("/ifp-web-static/image/all/leadScreen/Group_24@2x.png") no-repeat;
        background-position: bottom center;
        background-size: 100% auto;
        .error-list-item-num {
          color: #8573ff;
        }
      }
      &.error3 {
        background: url("/ifp-web-static/image/all/leadScreen/Group_23_1@2x.png") no-repeat;
        background-position: bottom center;
        background-size: 100% auto;
        .error-list-item-num {
          color: #d0deee;
        }
      }
      &.error4 {
        background: url("/ifp-web-static/image/all/leadScreen/Group_25@2x.png") no-repeat;
        background-position: bottom center;
        background-size: 100% auto;
        .error-list-item-num {
          color: #e37d4b;
        }
      }
    }
  }
  .month-task-list {
    .icon1 {
      background: url("/ifp-web-static/image/all/leadScreen/extrude-group@2x.png") no-repeat;
      background-position: center center;
      background-size: 100% 100%;
    }
    .icon2 {
      background: url("/ifp-web-static/image/all/leadScreen/extrude-group_1@2x.png") no-repeat;
      background-position: center center;
      background-size: 100% 100%;
    }
    .icon3 {
      background: url("/ifp-web-static/image/all/leadScreen/extrude-group_2@2x.png") no-repeat;
      background-position: center center;
      background-size: 100% 100%;
    }
    .icon4 {
      background: url("/ifp-web-static/image/all/leadScreen/extrude-group_3@2x.png") no-repeat;
      background-position: center center;
      background-size: 100% 100%;
    }
    .cw-task-list-item {
      height: 78px;
      &:not(:last-child) {
        background: url("/ifp-web-static/image/all/leadScreen/Rectangle_76@2x.png") no-repeat;
        background-position: bottom center;
        background-size: 100% auto;
      }
      display: flex;
      justify-content: space-between;
      &-icon {
        width: 48px;
        height: 48px;
        margin-right: 12px;
      }
      &-num {
        font-size: 28px;
        font-family: "TCloudNumber-Regular", "TCloudNumber";
        font-weight: 400;
        color: #009dff;
        line-height: 28px;
        margin-bottom: 3px;
      }
      &-text {
        font-size: 20px;
        font-weight: 400;
        color: #becee8;
        line-height: 22px;
      }
    }
    .task-overview {
      display: flex;
      align-items: center;
      margin-right: 10px;
    }
    .detail-list {
      display: flex;
      align-items: center;
      .detail-list-item {
        width: 80px;
        &:not(:last-child) {
          margin-right: 22px;
        }
        &-num {
          color: rgba(236, 241, 249, 1);
          font-family: "TCloudNumber";
          font-weight: 400;
          font-size: 20px;
          line-height: 24px;
        }
        &-text {
          color: rgba(177, 189, 202, 1);
          font-weight: 400;
          font-size: 20px;
          line-height: 22px;
        }
      }
    }
  }
  .jt-overview {
    .all {
      width: 127px;
      height: 104px;
      text-align: center;
      background: url("/ifp-web-static/image/all/leadScreen/Group_30@2x.png") no-repeat;
      background-position: bottom center;
      background-size: 100% auto;
      margin-right: 42px;
      .all-num {
        color: rgba(0, 157, 255, 1);
        font-family: "TCloudNumber";
        font-weight: 700;
        font-size: 48px;
        line-height: 48px;
        margin-bottom: 19px;
      }
      .all-text {
        color: rgba(208, 222, 238, 1);
        font-weight: 600;
        font-size: 24px;
        line-height: 34px;
      }
    }
    .jt-list {
      width: 327px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      &-item {
        width: 156px;
        height: 60px;
        display: flex;
        align-items: center;
      }
      &-item-icon {
        width: 60px;
        height: 60px;
        margin-right: 12px;
        background-position: center center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      &-item-text {
        color: rgba(177, 189, 202, 1);
        font-weight: 400;
        font-size: 20px;
        line-height: 22px;
        margin-bottom: 3px;
      }
      &-item-num {
        font-family: "TCloudNumber";
        font-weight: 400;
        font-size: 26px;
        line-height: 28px;
      }
      .run {
        .jt-list-item-icon {
          background-image: url("/ifp-web-static/image/all/leadScreen/Group_34@2x.png");
        }
        .jt-list-item-num {
          color: #009dff;
        }
      }
      .down {
        .jt-list-item-icon {
          background-image: url("/ifp-web-static/image/all/leadScreen/Group_35@2x.png");
        }
        .jt-list-item-num {
          color: #674fd4;
        }
      }
      .idle {
        .jt-list-item-icon {
          background-image: url("/ifp-web-static/image/all/leadScreen/Group_36@2x.png");
        }
        .jt-list-item-num {
          color: #66e1df;
        }
      }
      .pm {
        .jt-list-item-icon {
          background-image: url("/ifp-web-static/image/all/leadScreen/Group_37@2x.png");
        }
        .jt-list-item-num {
          color: #ffc97a;
        }
      }
    }
  }
  .jt-month-error {
    height: 186px;
    .error-data {
      margin-left: 43px;
    }
    .error-data-top {
      width: 264px;
      padding-bottom: 10px;
      background: url("/ifp-web-static/image/all/leadScreen/Rectangle_76@2x.png") no-repeat;
      background-position: bottom center;
      background-size: 100% auto;
    }
    .error-data-top-text {
      font-size: 24px;
      font-weight: 400;
      color: #b1bdca;
      line-height: 32px;
    }
    .error-data-top-num {
      font-size: 28px;
      font-family: "TCloudNumber-Regular", "TCloudNumber";
      font-weight: 400;
      color: #ecf1f9;
      line-height: 32px;
    }
    .error-data-item {
      margin-top: 13px;
      .error-data-item-text {
        font-size: 20px;
        font-weight: 400;
        color: #b1bdca;
        line-height: 22px;
      }
      .error-data-item-num {
        font-size: 24px;
        font-family: "TCloudNumber-Regular", "TCloudNumber";
        font-weight: 400;
        color: #ecf1f9;
        line-height: 24px;
      }
    }
  }
  .eqp-overview {
    &-text {
      color: rgba(177, 189, 202, 1);
      font-weight: 400;
      font-size: 18px;
      line-height: 22px;
      margin-bottom: 6px;
    }
    &-num {
      color: rgba(208, 222, 238, 1);
      font-family: "TCloudNumber";
      font-weight: 700;
      font-size: 28px;
      line-height: 28px;
    }
    &-sub {
      color: rgba(177, 189, 202, 1);
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
    }
    .pf-overview {
      height: 97px;
      border-bottom: 1px solid rgba(79, 132, 212, 1);
      text-align: center;
      position: relative;
      &-bg {
        width: 141px;
        height: 30px;
        position: absolute;
        right: 13px;
        top: 45px;
        background-image: url("/ifp-web-static/image/all/leadScreen/Intersect@2x.png");
        background-position: center center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      &-icon {
        width: 98px;
        height: 60px;
        background-image: url("/ifp-web-static/image/all/leadScreen/Group_127@2x.png");
        background-position: center center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-right: 28px;
      }
    }
    .zm-overview {
      height: 111px;
      text-align: center;
      position: relative;
      &-bg {
        width: 141px;
        height: 30px;
        position: absolute;
        right: 13px;
        top: 49px;
        background-image: url("/ifp-web-static/image/all/leadScreen/Intersect@2x.png");
        background-position: center center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      &-icon {
        width: 98px;
        height: 60px;
        background-image: url("/ifp-web-static/image/all/leadScreen/Group_129@2x.png");
        background-position: center center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-right: 28px;
      }
    }
  }
  .label-double {
    width: 100%;
    .label-double-name {
      text-align: center;
      color: rgba(79, 132, 212, 1);
      font-weight: 600;
      font-size: 16px;
      line-height: 18px;
      position: relative;
      top: 0px;
      margin-bottom: 10px;
    }
    .label-double-item {
      display: flex;
      justify-content: space-between;
      .label-double-text {
        margin-right: 5px;
        color: rgba(177, 189, 202, 1);
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
      }
      .label-double-num {
        color: rgba(208, 222, 238, 1);
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
      }
    }
  }
  .month-energry-consumption {
    padding-top: 13px;
    .month-energry-consumption-overview-list {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 26px;
      background: url("/ifp-web-static/image/all/leadScreen/Rectangle_76@2x.png") no-repeat;
      background-position: bottom center;
      background-size: 100% auto;
    }
    .month-energry-consumption-overview-item {
      width: calc(100% / 3 - 6px);
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background-image: url("/ifp-web-static/image/all/leadScreen/Group_115@2x.png");
      background-position: center center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin-top: 8px;
      margin-right: 8px;
      &:nth-child(3n) {
        margin-right: 0;
      }
      &:nth-child(-n + 3) {
        margin-top: 0;
      }
    }
    .item-text {
      color: rgba(177, 189, 202, 1);
      font-weight: 400;
      font-size: 16px;
      line-height: 22px;
      margin-bottom: 4px;
    }
    .item-num {
      color: rgba(208, 222, 238, 1);
      font-family: "TCloudNumber";
      font-weight: 400;
      font-size: 22px;
      line-height: 28px;
    }
    .item-sub {
      color: rgba(177, 189, 202, 1);
      font-family: "TCloudNumber";
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
    }
  }
  .year-expenses {
    margin-top: 16px;
    .year-expenses-title {
      width: 355px;
      height: 34px;
      display: flex;
      justify-content: center;
      margin: 0 auto;
      background-image: url("/ifp-web-static/image/all/leadScreen/Group_121@2x.png");
      background-position: center center;
      background-size: 100% auto;
      background-repeat: no-repeat;
    }
    .year-expenses-title-icon {
      width: 24px;
      height: 24px;
      margin-right: 5px;
      background-image: url("/ifp-web-static/image/all/leadScreen/Frame@2x.png");
      background-position: center center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .year-expenses-title-text {
      color: rgba(177, 189, 202, 1);
      font-weight: 400;
      font-size: 24px;
      line-height: 34px;
    }
    .year-expenses-value {
      margin-top: 3px;
      display: flex;
      justify-content: center;
      align-items: baseline;
    }
    .year-expenses-num {
      background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 201, 122, 1) 100%);
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text !important;
      font-family: "TCloudNumber";
      font-weight: 700;
      font-size: 40px;
      line-height: 1;
    }
    .year-expenses-sub {
      color: rgba(208, 222, 238, 1);
      font-weight: 400;
      font-size: 16px;
    }
  }
  .year-expenses-detail {
    margin-top: 18px;
    .detail-card {
      display: flex;
      padding: 8px 11px 5px 16px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-sizing: border-box;
      background: rgba(0, 157, 255, 0.04);
      &:not(:last-child) {
        margin-bottom: 8px;
      }
    }
    .detail-card-icon {
      width: 64px;
      height: 64px;
      background-position: center center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin-right: 13px;
    }
    .icon1 {
      background-image: url("/ifp-web-static/image/all/leadScreen/Group_122@2x.png");
    }
    .icon2 {
      background-image: url("/ifp-web-static/image/all/leadScreen/Group_123@2x.png");
    }
    .icon3 {
      background-image: url("/ifp-web-static/image/all/leadScreen/Group_124@2x.png");
    }
    .icon4 {
      background-image: url("/ifp-web-static/image/all/leadScreen/Group_125@2x.png");
    }
    .icon5 {
      background-image: url("/ifp-web-static/image/all/leadScreen/Group_126@2x.png");
    }
    .detail-card-item {
      height: 23px;
      display: flex;
      align-items: center;
      &:not(:last-child) {
        margin-bottom: 8px;
      }
      .item-name {
        width: 42px;
        color: rgba(177, 189, 202, 1);
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        margin-right: 5px;
        text-align: right;
      }
      .item-progress {
        width: 200px;
        height: 16px;
        background: rgba(0, 157, 255, 0.45);
        margin-right: 5px;
      }
      .item-progress-content {
        width: 200px;
        height: 16px;
        padding-right: 2px;
        background: rgba(0, 157, 255, 1);
        transition: all 0.3s linear;
        color: rgba(208, 222, 238, 1);
        font-family: "TCloudNumber";
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        text-align: right;
      }
      .item-num {
        color: rgba(208, 222, 238, 1);
        font-family: "TCloudNumber";
        font-weight: 400;
        font-size: 20px;
        line-height: 22px;
      }
      .item-sub {
        color: rgba(177, 189, 202, 1);
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
      }
    }
  }
}
</style>
